<template>
	<view class="point-add">
		
		<view class="top" style="z-index: 2;">
			<uni-icons style="margin-left: 30rpx;" type="left" size="25" color="#2c2c2c" @click="toBackPage">
			</uni-icons>
			<view style="margin-right: 300rpx;">编辑观点</view>
		</view>
		
		<view class="content">
			<view class="card" style="display: flex; flex-direction: column; margin-top: 30rpx">
				<view style="font-weight: bold;padding: 20rpx 20rpx 10rpx 20rpx;">
					{{ question.title}}
				</view>
				<view v-html="question.context || '<p>this is description</p>'" style="padding: 10rpx 20rpx 20rpx 20rpx;"></view>
			</view>
			<view class="card" style="display: flex; flex-direction: column; margin-top: 30rpx">
				<view style="font-size: 110%;  font-weight: bold; margin-left: 20rpx; margin-top: 20rpx">个人观点
				</view>
				<view style="position: relative;">
					<!-- <Editor editorId="keyword-editor" ref="keyword-editor" :height="480" v-model="keyword" :showBar="false" /> -->
					<!-- <view v-html="keyword || '<p>请在此输入</p>'" style="padding: 20rpx;min-height: 300rpx;"></view> -->
					<textarea :show-confirm-bar="false" v-model="keyword" style="min-height: 300rpx;margin-top: 20rpx; margin-left: 20rpx"
						placeholder="请输入..." placeholder-style="font-style:italic"></textarea>
				</view>
			</view>
			<view class="card" style="display: flex; flex-direction: column; margin-top: 30rpx" v-if="!point.id">
				<view style="font-size: 110%;  font-weight: bold; margin-left: 20rpx; margin-top: 20rpx">我的回答
				</view>
				<view style="position: relative;">
					<!-- <Editor editorId="content-editor" ref="content-editor" :height="480" v-model="content" :showBar="false" /> -->
					<view v-html="content || '<p>请输入...</p>'" style="padding: 20rpx;min-height: 300rpx;"></view>
					<view class="editor-glass" @click="showFormWrapper('content')"></view>
				</view>
			</view>
			
			<button @tap="saveOrUpdatePoint"
				style="background-color: #2c2c2c; color: white; margin-top: 30rpx; margin-bottom: 30rpx; border-radius: 18rpx">提
				交</button>
			
			<form-wrapper 
				:show="formWrapperShow" 
				:form="wrapperFormValue" 
				:defaultId="chosenFormId"
				@closeWrapper="handleCloseWrapper"
			></form-wrapper>
		</view>
	</view>
</template>

<script>
	import http from '@/common/service/service.js';
	import HulaEditor from '../../components/editor-wrapper/v3/editor.vue';
	import FormWrapper from '../../components/editor-wrapper/v3/form-wrapper.vue';
	export default {
  components: { HulaEditor, FormWrapper },
		data() {
			return {
				question: {},
				point:{},
				keyword: '',
				content: '',
				chosenFormId: '',
				formWrapperShow: false,
				form: [
					{
						id: 'title',
						title: '标题',
						content:'',
						type: 'text',
						props: {
							placeholder: '请输入',
							height: 480
						}
					},
					{
						id: 'context',
						title: '描述',
						content:'',
						type: 'text',
						props: {
							placeholder: '请输入',
							height: 480
						}
					},
					{
						id: 'keyword',
						title: '观点',
						content:'',
						type: 'textarea',
						props: {
							placeholder: '请输入',
							height: 480
						}
					},
					{
						id: 'content',
						title: '回答',
						content:'',
						type: 'rich-text',
						props: {
							placeholder: '请输入',
							height: 480
						}
					},
				]
			};
		},
		onLoad: function(options) {
			console.log(options)
			this.question.id = options.questionId
			if(options.pointId){
				this.point.id = options.pointId
			}else{
				this.keyword = options.content
			}
			this.getQuestionInfo()
			this.getPointInfo()
		},
		methods: {
			saveOrUpdatePoint() {
				if(this.point.id){
					// 更新观点
					this.$api.updatePoint({
						id: this.point.id,
						keyword: this.keyword,
					}).then(res => {
						uni.showModal({
							title: '提示',
							content: '更新成功！点击确认返回上一页',
							success(res) {
								if (res.confirm) {
									uni.navigateBack();
								}
							}
						});
					})
				}else{
					// 新增观点
					this.$api.createPoint({
						questionId: this.question.id,
						keyword: this.keyword,
						answer:{
							content: this.content,
						}
					}).then(res => {
						uni.showModal({
							title: '提示',
							content: '添加成功！点击确认返回上一页',
							success(res) {
								if (res.confirm) {
									uni.navigateBack({
										delta: 1
									});
								}
							}
						});
					})
				}
			},
			getQuestionInfo() {
				this.$api.getQuestionInfo({
					id: this.question.id
				}).then(res => {
					this.question = res.data
				})
			},
			getPointInfo() {
				this.$api.getPointInfo({
					id: this.point.id
				}).then(res => {
					this.point = res.data
					this.keyword = this.point.keyword
				})
			},
			showFormWrapper(id) {
				this.formWrapperShow = true
				this.chosenFormId = id
				this.form[0].content = this.question.title
				this.form[1].content = this.question.context
				this.form[2].content = this.keyword
				this.form[3].content = this.content
				this.$forceUpdate()
			},
			handleCloseWrapper(newFormValue) {
				this.formWrapperShow = false;
				console.log('new form value', newFormValue)
				newFormValue.forEach((item) => {
					this[item.id] = item.props.value
					if (item.type === 'rich-text') {
						this.$refs[`${item.id}-editor`].setContents(item.props.value)
					}
				})
			},
			
		},
		computed: {
			wrapperFormValue() {
				const form = this.form.map((item) => ({
					...item,
					props: {
						...item.props,
						value: this[item.id],
					},
				}))
				console.log('form', form)
				return form
			}
		}
	};
</script>
<style scoped lang="scss">
	
	.point-add {
		display: flex;
		flex-direction: column;
		
		.top {
			position: sticky;
			top: 0;
			background-color: white;
			border-bottom: solid thin #d1d1d1;
		
		
			width: 100%;
			height: 80rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			padding-top: 100rpx;
			
			// #ifdef H5
			padding-top: 40rpx;
			// #endif
		}
		
		.content{
			display: flex;
			flex-direction: column;
			
			width: 690rpx;
			margin-left: 30rpx;
			
			
			.editor-glass {
				position: absolute;
				z-index: 10;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
			}
			.card {
				background-color: white;
				box-shadow: 1px 1px 8px 2px #e9eee9;
				border-radius: 18rpx;
			}
		}
	
	}

	
</style>
